<template>
  <div>
    <div v-for="(cItem,cIndex) in answerItem" v-show="cIndex<3||showmoreFlag" :key="cIndex" class=" c-wb-ba c-fs22 c-ml20 c-mr20" :class="cIndex==answerItem.length-1?'':'c-mb20'">
      <div class="c-flex-row">
        <div>
          <span class="c-inlineblack  c-fc-sblack c-lh-18 c-vcAlign-middle c-inlineblack">
            {{cItem.dynamicName?cItem.dynamicName.length<=6?cItem.dynamicName:cItem.dynamicName.substring(0, 6)+'...':
              cItem.userName.length<=6?cItem.userName:cItem.userName.substring(0, 6)+'...'}}
            <!-- {{cItem.userName.length<=6?cItem.userName:cItem.userName.substring(0, 6)+'...'}} -->
          </span>
          </span>
          :
          <span v-if="cItem.msgType == 19 && cItem.talkType>=0" class="c-fs24 c-ws-pw c-fc-gray" v-html="cItem.content">
          </span>
          <!-- 答案为图片 -->
          <span v-else-if="cItem.msgType == 20 && cItem.talkType>=0" class="c-hh200 c-pb20" @click="clickAswerPreviewImage(cIndex)">
            <img class="c-br10 c-hh200 img-pe-none c-inlineblack c-vcAlign-top" :src="$addXossFilter(cItem.content, require('@/assets/no_chat_img.png'))" alt="" />
          </span>
          <span v-if="cItem.talkType<0" class="c-fs24 c-inlineblack c-ws-pw c-fc-gray">该答案已被隐藏
          </span>
        </div>
      </div>
    </div>
    <div v-show="answerItem.length>3&&!showmoreFlag" class="c-bd-t1-f6 c-pt10">
      <div class="c-fs26 c-fc-gray c-flex-row c-aligni-center c-justify-center" @click="clickMore">展开查看更多<span class="iconfont c-fc-gray c-fs14 c-ml4">&#xe908;</span></div>
    </div>
  </div>
</template>
<script>
import {wxUtilJs } from "@/utils/common.js";
export default {
  name: "socailAnswer",
  props: {
    answerItem:{
      type: Array,
      default: () => {
        return []
      },
    }
  },
  data() {
    return {
      showmoreFlag:false
    };
  },
  methods: {
    clickAswerPreviewImage(aIndex) {
      let imgUrl = this.answerItem[aIndex].content;
      wxUtilJs.previewImage({
        current: imgUrl, // 当前显示图片的http链接
        urls: [imgUrl] // 需要预览的图片http链接列表
      });
    },
    clickMore() {
      this.showmoreFlag = true
    },
  },
};
</script>